<template>
  <div>
    <a-form-model
      ref="taskForm"
      :model="taskForm"
      :rules="taskRules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-card title="案件详情" :loading="loading">
        <template slot="extra">
          <a-button type="primary" @click="onUpload" style="margin-right: 10px" v-if="uploadForm.patenteer.filename">上传定稿文件</a-button>
          <a-button type="danger" @click="onUpload" style="margin-right: 10px" v-else>上传定稿文件</a-button>
          <a-button type="primary" @click="makePdf">生成PDF</a-button>
        </template>
        <a-row :gutter="20">
          <a-col :span="12">
            <a-card title="基本信息">
              <a-form-model-item label="申请号/专利号">
                <a-input v-model="businessForm.zl_no" placeholder="输入申请号/专利号" type="text" />
              </a-form-model-item>
              <a-form-model-item label="专利名称">
                <a-input v-model="businessForm.zl_name" placeholder="输入申专利名称" type="text" />
              </a-form-model-item>
              <a-form-model-item label="申请人/专利权人">
                <a-input v-model="businessForm.customer_name" placeholder="输入申请人/专利权人" type="text" />
              </a-form-model-item>
              <a-form-model-item label="专利状态">
                <!--              <a-select-->
                <!--                show-search-->
                <!--                v-model="businessForm.zl_state"-->
                <!--                placeholder="选择专利当前状态"-->
                <!--                :filter-option="filterOption"-->
                <!--              >-->
                <!--                <a-select-option v-for="(item,index) in businessOpts" :key="index" :value="item">{{item}}</a-select-option>-->
                <!--              </a-select>-->
                <a-input v-model="businessForm.zl_state" placeholder="请关联专利状态" type="text" />
              </a-form-model-item>
              <a-form-model-item label="申请日">
                <a-date-picker v-model="businessForm.created_at"/>
              </a-form-model-item>
              <a-form-model-item label="合同编号">
                <a-input v-model="businessForm.contract_no" placeholder="请关联合同号" type="text" />
              </a-form-model-item>
              <a-form-model-item label="业务编号">
                <a-input v-model="businessForm.business_no" placeholder="请关联业务号" type="text" />
              </a-form-model-item>
              <a-form-model-item label="业务类别">
                <a-input v-model="businessForm.zl_type" placeholder="请关联业务号" type="text" />
              </a-form-model-item>
              <a-form-model-item label="业务名称">
                <a-input v-model="businessForm.business_name" placeholder="请关联业务号" type="text" />
              </a-form-model-item>
              <a-form-model-item label="联系电话">
                <a-input v-model="businessForm.phone" placeholder="请关联联系电话" type="text" />
              </a-form-model-item>
              <a-form-model-item label="价格">
                <a-input-number v-model="businessForm.price" placeholder="请关联业务号" type="text" />
              </a-form-model-item>
              <a-form-model-item label="官费">
                <a-input-number v-model="businessForm.official_fee" placeholder="请关联业务号" type="text" />
              </a-form-model-item>
              <a-form-model-item label="所属顾问">
                <!--              <a-select-->
                <!--                show-search-->
                <!--                v-model="businessForm.username"-->
                <!--                placeholder="请选择所属顾问"-->
                <!--                :filter-option="filterOption"-->
                <!--              >-->
                <!--                <a-select-option value="jack">-->
                <!--                  Jack-->
                <!--                </a-select-option>-->
                <!--              </a-select>-->
                <a-input v-model="businessForm.username" placeholder="请关联所属顾问" type="text" />
              </a-form-model-item>
              <a-form-model-item label="专利师/撰写人">
                <!--              <a-select-->
                <!--                show-search-->
                <!--                v-model="businessForm.patenteer"-->
                <!--                placeholder="请选择专利师/撰写人"-->
                <!--                :filter-option="filterOption"-->
                <!--              >-->
                <!--                <a-select-option value="jack">-->
                <!--                  Jack-->
                <!--                </a-select-option>-->
                <!--              </a-select>-->
                <a-input v-model="businessForm.patenteer" placeholder="请关联专利师" type="text" />
              </a-form-model-item>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card title="业务材料">
              <template slot="extra">
                <a-button size="small" type="danger" icon="download" @click="batchDownload">批量下载</a-button>
              </template>
              <a-alert>
                <template slot="message">
                  整理后的材料：<a @click="() => window.open(businessForm.mat_file)">{{businessForm.mat_filename}}</a>
                </template>
              </a-alert>
              <a-divider />
              <a-form-model :model="materialForm">
                <a-form-model-item v-for="(item,index) in materialForm" :key="index" :label="item.label">
                  <div v-if="item.type === 'text'">
                    <a-input v-model="item.value" />
                  </div>
                  <div v-if="item.type === 'textarea'">
                    <a-textarea :rows="4" v-model="item.value"></a-textarea>
                  </div>
                  <div v-if="item.type === 'select'">
                    <a-select v-model="item.value">
                      <a-select-option v-for="(item,index) in item.items" :key="index" :value="index">{{ item }}</a-select-option>
                    </a-select>
                  </div>
                  <div v-if="item.type === 'radio'">
                    <a-radio-group v-model="item.value">
                      <a-radio v-for="(item,index) in item.items" :key="index" :value="index">
                        {{ item }}
                      </a-radio>
                    </a-radio-group>
                  </div>
                  <div v-if="item.type === 'image'">
                    <div v-if="item.value">
                      <img style="width: 40px; height: 40px;cursor: pointer" :src="item.value" @click="handlePreview(item.value)">
                      <a-button size="small" type="link" icon="download" @click="download(item.value, item.filename)"></a-button>
                    </div>
                  </div>
                  <div v-if="item.type === 'file'">
                    <a-button
                      v-if="item.value"
                      size="small"
                      type="link"
                      icon="download"
                      @click="download(item.value, item.filename)"
                    >
                      {{item.filename}}
                    </a-button>
                  </div>
                  <div v-if="item.type === 'file-xls'">
                    <a-button v-if="item.value" size="small" type="link" icon="download" @click="() => download(item.value, item.filename)">{{item.filename}}</a-button>
                  </div>
                </a-form-model-item>
                <a-form-model-item>
                  <a-button style="float:right;" type="primary" @click="onSubmit">保存</a-button>
                </a-form-model-item>
              </a-form-model>
<!--              <a-descriptions :column="1">-->
<!--                <a-descriptions-item v-for="(item,index) in mats" :key="index" :label="item.label">-->
<!--                  <div v-if="item.type === 'text'">-->
<!--                    <a-button-->
<!--                      v-if="item.value"-->
<!--                      size="small"-->
<!--                      type="link"-->
<!--                      icon="copy"-->
<!--                      class="copy"-->
<!--                      :data-clipboard-text="item.value"-->
<!--                      @click="copy"-->
<!--                    >-->
<!--                      {{item.value}}-->
<!--                    </a-button>-->
<!--                  </div>-->
<!--                  <div v-if="item.type === 'image'">-->
<!--                    <div v-if="item.value">-->
<!--                      <img style="width: 40px; height: 40px;cursor: pointer" :src="item.value" @click="handlePreview(item.value)">-->
<!--                      <a-button size="small" type="link" icon="download" @click="() => window.open(item.value)"></a-button>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div v-if="item.type === 'file'">-->
<!--                    <a-button-->
<!--                      v-if="item.value"-->
<!--                      size="small"-->
<!--                      type="link"-->
<!--                      icon="download"-->
<!--                      @click="() => window.open(item.value)"-->
<!--                    >-->
<!--                      {{item.filename}}-->
<!--                    </a-button>-->
<!--                  </div>-->
<!--                  <div v-if="item.type === 'file-xls'">-->
<!--                    <a-button v-if="item.value" size="small" type="link" icon="download" @click="() => window.open(item.value)">{{item.filename}}</a-button>-->
<!--                  </div>-->
<!--                </a-descriptions-item>-->
<!--              </a-descriptions>-->
            </a-card>
            <a-card title="流转记录" style="margin-top:20px">
              <a-timeline>
                <a-timeline-item v-for="item in historyData" :key="item.circul_id">{{item.step}} {{item.username}}，{{item.notes}} {{item.created_at}} <a :href="item.file">{{item.filename}}</a></a-timeline-item>
              </a-timeline>
            </a-card>
            <a-card title="后续进展" style="margin-top:20px">
              <a-timeline>
                <a-timeline-item v-for="item in stateData" :key="item.cb_id">{{item.state_name}}<a @click="download(item.file, item.filename)" v-if="item.state_name === '补正' || item.state_name === '授权'">【<a-icon type="download" /> {{item.filename}}】</a> {{item.created_at}}</a-timeline-item>
              </a-timeline>
            </a-card>
          </a-col>
        </a-row>
      </a-card>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
    </a-form-model>
    <a-modal
      centered
      title="上传专利定稿文件"
      :confirm-loading="loading"
      v-model="uploadVisible"
      @ok="submitUpload"
    >
      <a-form-model
        :model="uploadForm"
      >
        <!--        <a-form-model-item label="业务名称">-->
        <!--          <a-input disabled v-model="uploadForm.business_name" type="text" />-->
        <!--        </a-form-model-item>-->
        <a-form-model-item label="上传专利定稿文件">
          <a-upload
            name="file"
            accept=".rar,.zip,.7z"
            :multiple="true"
            :headers="headers"
            :action="uploadUrl"
            :show-upload-list="false"
            @change="onChange"
          >
            <a-button type="danger"> <a-icon type="upload" />上传定稿文件</a-button>
          </a-upload>
        </a-form-model-item>
        <a-button v-if="uploadForm.patenteer" size="small" type="link" icon="download" @click="download(uploadForm.patenteer.file, uploadForm.patenteer.filename)">{{uploadForm.patenteer.filename}}</a-button>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import Clipboard from 'clipboard'
  import {
    batchDownload,
    getCaseUpload,
    getProcessDetail,
    postCaseUpload,
    postProcessDetail
  } from '@/api/patent.process'
  import apis from '@/api'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'

  export default {
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    name: 'ProcessDetail',
    data () {
      return {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        labelCol1: { span: 7 },
        wrapperCol1: { span: 15 },
        taskForm: {},
        taskRules: {},
        businessForm: {},
        categoryOpts: {},
        businessOpts: {},
        historyData: [],
        mats: {},
        loading: true,
        previewImage: '',
        previewVisible: false,
        uploadUrl: apis.Upload,
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        },
        materialForm: {},
        uploadForm: {},
        uploadVisible: false,
        stateData: {}
      }
    },
    activated () {
      const form = {}
      if (this.isEdit) {
        const id = this.$route.params && this.$route.params.id
        this.loading = true
        getProcessDetail(id).then(res => {
          if (res.status === 0) {
            this.businessForm = res.result.contract_business
            this.categoryOpts = res.result.business_category_opts
            this.businessOpts = res.result.business_opts
            this.historyData = res.result.histories
            this.stateData = res.result.states
            this.mats = res.result.mats
            for (const k in res.result.mats) {
              form[res.result.mats[k].name] = res.result.mats[k]
            }
            this.materialForm = form
          }
        }).finally(() => {
          this.loading = false
        })
        getCaseUpload(id).then(res => {
          this.uploadForm = res.result
          this.uploadForm['cb_id'] = id
        })
      }
    },
    methods: {
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      handlePreview (file) {
        this.previewImage = file
        this.previewVisible = true
      },
      handleCancel () {
        this.previewVisible = false
      },
      copy (e) {
        const clipboard = new Clipboard('.copy')
        clipboard.on('success', e => {
          this.$message.success('复制成功')
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          this.$message.error('复制失败')
          clipboard.destroy()
        })
      },
      makePdf () {
        this.$warning({
          title: '功能待开发'
        })
      },
      batchDownload () {
        batchDownload(this.$route.params.id).then(res => {
          if (res.status === 0) {
            window.open(res.result.fileUrl)
          } else {
            this.$warning({
              title: res.msg
            })
          }
        })
      },
      onUpload () {
        // const id = this.$route.params.id
        // getCaseUpload(id).then(res => {
        //   this.uploadForm = res.result
        //   this.uploadForm['cb_id'] = id
        //   this.uploadVisible = true
        // })
        this.uploadVisible = true
      },
      submitUpload () {
        const app = this
        const data = {}
        data['patenteer[file]'] = app.uploadForm.patenteer.file
        data['patenteer[filename]'] = app.uploadForm.patenteer.filename
        postCaseUpload(app.$route.params.id, data).then(res => {
          if (res.status === 0) {
            app.uploadVisible = false
            app.$refs.table.refresh()
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onChange (info) {
        if (info.file.status === 'uploading') {
          this.loading = true
          return false
        }
        if (info.file.status === 'done') {
          this.uploadForm.patenteer.filename = info.file.name
          this.uploadForm.patenteer.file = info.file.response.result.url
          this.loading = false
        }
      },
      download (value, filename) {
        window.open(apis.Download + '?value=' + value + '&filename=' + filename)
      },
      onSubmit () {
        const app = this
        const form = Object.assign(app.materialForm)
        const _form = {}
        for (const k in form) {
          if (form[k].name2) {
            _form[form[k].name2] = form[k].filename
          }
          _form[form[k].name] = form[k].value
        }
        postProcessDetail(app.$route.params.id, _form).then(res => {
          if (res.status === 0) {
            app.$message.success('保存成功！')
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
